{extend name="$_admin_public_base_"/}
{block name="style"}
  <!--此页面增加的style-->
  <style type="text/css">
      .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            height: 400px;
        }
  </style>
  <link href="__LIBS__/bootstrap-table/bootstrap-table.min.css" type="text/css" rel="stylesheet">
{/block}

{block name="main"}
  <div class="row">
      <div class="eacoo-tabs builder-form-tabs col-md-12">
          <ul class="nav nav-tabs">
              <li class=""><a href="{:plugin_url('message/Message/index',['box_type'=>'inbox'])}">收件箱<span class="msg-bage badge bg-teal">{$inboxMessageCount}</span></a></li>
              <li class=""><a href="{:plugin_url('message/Message/index',['box_type'=>'outbox'])}">发件箱<span class="msg-bage badge bg-purple" >{$outboxMessageCount}</span></a></li>
              <li><a class="btn bg-aqua btn-block return" href="{:plugin_url('message/Message/send_message')}"><i class="fa fa-send-o"></i> 发送消息</a></li>
          </ul>
        <div class="form-group"></div>
    </div>
  </div>

  <div class="builder formbuilder-box mt-20">

  <div class="row">    

  <div class="col-md-8">      
    <form action="" method="post" id="form-msg" class="form-builder form-horizontal">
    <fieldset>
      <div class="form-group item_to_uids ">
        <label for="to_uids" class="col-md-2 control-label">接收者</label>
        <div class="col-md-9">
          <input type="text" id="to_names" class="form-control" name="to_names" value="" placeholder="填写接收用户ID，留空则群发所有用户">
          <input type="text" id="to_uids" class="form-control" name="to_uids" value="" style="display:none;" placeholder="填写接收用户ID，留空则群发所有用户">
        </div>
    </div>
    <div class="form-group item_title ">
        <label for="title" class="col-md-2 control-label">标题<sup>*</sup></label>
        <div class="col-md-9">
          <input type="text" class="form-control" name="title" value="" placeholder="必填">
          
        </div>
    </div>
    <div class="form-group item_content ">
    <label for="content" class="col-md-2 control-label">消息内容<sup>*</sup></label>
      <div class="col-md-9">
        <textarea id="hidden"  name="html_content" class="form-control" style="display:none"></textarea>
        <textarea id="hidden2"  name="txt_content" class="form-control" style="display:none"></textarea>
        <div id="bar" class="toolbar">
        </div>
        <div style="padding: 5px 0; color: #ccc"></div>
        <div id="editor" class="text">

        </div>
          
      </div>
    </div>
    <div class="form-group">
        <div class="col-md-10 col-md-offset-2 tc">
          <button class="btn btn-primary submit ajax-post " type="submit" target-form="form-builder">确定</button> 
              &nbsp;<button onclick="javascript:document.getElementById('form-msg').reset();return false;" class="btn btn-warning">重置</button>
      </div>
  </div>
 </fieldset>
</form>    
</div>     
       
<div class="col-md-4">    
  <div class="builder-table">
    <!-- 数据列表 -->

    <div class="panel panel-default">
        <div class="panel-heading">
            选择收件人
        </div>
        <div class="panel-body">

        <table class="bootstrap-table" id="mytable"></table>
        </div>
    </div>
  </div>
</div>

    </div><!--row-->

  </div>



{/block}

{block name="script"}
  <!-- 后续同学维护可查看http://www.wangeditor.com/文档进行维护 -->

  <!-- wangeditor 所支持的js文件-->
  <script type="text/javascript" src="__LIBS__/wangeditor/wangEditor.min.js"></script>
  <script type="text/javascript" src="__LIBS__/bootstrap-table/bootstrap-table.min.js"></script>
  <script type="text/javascript" src="__LIBS__/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

 <!-- boostrap table js-->
 <script type="text/javascript">
  group_id = $('#group_id').val();
  $('#mytable').bootstrapTable({
      data:{$data},
      pagination: true,
      dataField: 'total',
      pageList: [10, 20 ,50],
      columns: [
          {
              checkbox: true
          },
          {
              field: 'avatar',
              title: '头像',
              //checkbox:true
              formatter:function (value) {
                        var state
                        state= "<img style='width:32px;height:32px;' onerror='this.src='/static/assets/img/default-avatar.png'' src="+value+">";
                        return state;
                    }
          }, {
              field: 'uid',
              title: '用户名'
          }, {
              field: 'nickname',
              title: '名称'
          },{
              field:'login',
              title:'状态',
                    formatter:function (value) {
                        var state
                        if(!value)
                            state= "<span class='badge bg-red' style='padding:5px 10px;'>离线</span>";
                        else
                            state= "<span class='badge bg-green'  style='padding:5px 10px;'>在线</span>";
                        return state;
                    }
          }
      ],
      height: 560,
      search: true,
      showColumns: true,
      showToggle: true,
      idFieldId: 'uid',
      clickToSelect: true,
      toolbar: '#toolbar',
      onCheck:function(row){
            var con1=document.getElementById("to_names").value;
            if(con1=="")
                document.getElementById("to_names").value+=row['nickname'];
            else
                document.getElementById("to_names").value+=","+row['nickname'];

            var con2=document.getElementById("to_uids").value;
            if(con2=="")
                document.getElementById("to_uids").value+=row['uid'];
            else
                document.getElementById("to_uids").value+=","+row['uid'];
        },
     onUncheck:function(row){
            var con1=document.getElementById("to_names").value;
            var arr=con1.split(',');
            for(i=0;i<con1.length;i++)
            {
                alert(con1[i]);
            }
           
            

        }
  })
  $("#mytable").bootstrapTable({

//点击每一个单选框时触发的操作

        

//取消每一个单选框时对应的操作；

        
});

  </script>
  <!-- wangeditor 配置-->
  <script type="text/javascript">
    var E = window.wangEditor
      var editor = new E('#bar','#editor')
      var $text1 = $('#hidden')
      var $text2 = $('#hidden2')
      editor.customConfig.onchange = function (html) {
          // 监控变化，同步更新到 textarea
          $text1.val(html)
          $text2.val(editor.txt.text())
      }
      editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        //'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'code',  // 插入代码
        //'undo',  // 撤销
        //'redo'  // 重复
      ]
      editor.customConfig.uploadImgShowBase64 = true
      editor.create()
      // 初始化 textarea 的值
      $text1.val(editor.txt.html())
      $text2.val(editor.txt.text())
</script>

  <script type="text/javascript">
      $(function(){
          //遍历选中当前权限的子权限
          $('.auth input[type="checkbox"]').on('change',function(){
              $('.'+$(this).attr('data-module-name')+' .auth'+$(this).val()).find('input').prop('checked',this.checked);
          });
      });
  </script>
{/block}